<template>
    <div>
      <CustomTable :tableObj="tableObj" :sortFlag="sortFlag" @handleSort="handleSort">
          <template #next>
              <el-table-column v-if="sortFlag === 'name'" prop="nameRate" label="名字占比" />
              <el-table-column v-else prop="numRate" label="数量占比" />
          </template>
      </CustomTable>
    </div>
</template>
<script setup lang="ts">
import CustomTable from '@/components/custom-table/CustomTable.vue'
import { ref } from 'vue'
import { sortArray } from '@/utils/array-sort'
import type { TableObj } from '@/components/custom-table/types'

const tableObj = ref<TableObj>({
  tableHeader: [
    { label: '日期', value: 'date' },
    { label: '名字', value: 'name', sort: true },
    { label: '数量', value: 'num', sort: true }
    // { label: '名字占比', value: 'nameRate' },
    // { label: '数量占比', value: 'numRate' }
  ],
  familyHeader: [
    { label: '物料名称', value: 'mateialName' },
    { label: '编码', value: 'code' },
    { label: '金额', value: 'amount', sort: true },
    { label: '数量', value: 'quantity' },
    { label: '均价', value: 'averagePrice', sort: true }
  ],
  tableData: [
    {
      id: 1,
      date: '2016-05-03',
      name: 'Weding',
      num: 5,
      nameRate: '20:00%',
      numRate: '30:00%',
      childrenTitle: '表格1标题',
      children: [
        { id: 3, mateialName: '点击', code: '100112', amount: '66668万元', quantity: '80', averagePrice: '500万' },
        { id: 2, mateialName: '芯片', code: '100111', amount: '7078万元', quantity: '122', averagePrice: '1000万' }
      ]
    },
    { id: 4, date: '2016-05-02', name: 'Jen', num: 6, nameRate: '20:00%', numRate: '30:00%', children: [] },
    { id: 5, date: '2016-05-04', name: 'Tom', num: 5, nameRate: '20:00%', numRate: '30:00%', children: [] },
    {
      id: 6,
      date: '2016-05-01',
      name: 'Eshine',
      num: 1,
      nameRate: '20:00%',
      numRate: '30:00%',
      childrenTitle: '表格4标题',
      children: [
        { id: 7, mateialName: '芯片2', code: '100111', amount: '200万元', quantity: '122', averagePrice: '100万' },
        { id: 8, mateialName: '点击2', code: '100112', amount: '100万元', quantity: '80', averagePrice: '200万' }
      ]
    }
  ]
})

// 表格数据排序
const sortFlag = ref<string>('name')
const handleSort = (value: string):void => {
  tableObj.value.tableData = sortArray(tableObj.value.tableData, value as string)
  sortFlag.value = value
}

</script>
